<template>
  <div>
    御剑乘风来,除魔天地间! 一级 3
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>

    <!-- 对话框 -->
    <input
      type="button"
      value="按钮==显示对话框"
      @click="dialogVisible = true"
    />
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="80%"
      @close="close"
    >
      <span>这是一段信息</span>
      <e-form ref="formBox"></e-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
           
<script>
import eForm from './eForm.vue'
export default {
  components: {
    eForm,
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1',
                },
              ],
            },
          ],
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1',
                },
              ],
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1',
                },
              ],
            },
          ],
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1',
                },
              ],
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1',
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },

      /* 对话框 */
      dialogVisible: false,
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },

    /* 监听对话框  是否关闭 */
    close() {
      console.log('close')
      /* 目标：关闭对话框：让他恢复表单值
      对话框关闭===需要触发close  ====只需要调用resetForm函数 [eForm.vue]
      + 获取eForm组件
      + 使用eForm组件中的函数
       */
      var that = this.$refs.formBox  //  获取的是eForm组件 ===等价于组件中获取的this
      //console.log(formBox, 9999)
      that.resetForm()
    },
  },
}
</script>
<style lang='less'  scoped>
</style>